{% from "components/macros/layout.html" import card, facts %}
{% from "components/macros/table.html" import data_table %}
<div class="grid gap-4 lg:grid-cols-3">
  {% call card("Connection", None, id="redis-connection") %}
    {{ facts(connection) }}
  {% endcall %}
  <div class="lg:col-span-2">
    {% call card("Clients", clients|length ~ " connected") %}
      {{ data_table([
        {"key": "id", "label": "ID"},
        {"key": "addr", "label": "Address", "kind": "code"},
        {"key": "age", "label": "Age (s)", "align": "right"},
        {"key": "idle", "label": "Idle (s)", "align": "right"},
        {"key": "db", "label": "DB", "align": "right"},
        {"key": "cmd", "label": "Last command", "kind": "code"},
      ], clients, empty="No clients connected") }}
    {% endcall %}
  </div>
</div>